<template>
  <div>
  <h2>条件判断指令</h2>
  <!-- vue提供了来年各个条件判断指令，分别是 v-show和 v-if -->
<p v-show='flag'>通过v-show控制</p>
<p v-if='flag'>通过v-if控制</p>
<!-- 
  相同点：都能够控制元素的显示和隐藏；
  不同点：
  当条件为false时候：
  v-show通过display：none让元素隐藏；
  v-if是直接元素移除了，从而让元素隐藏。
 -->
 <!-- 
总结：
 如果一个元素经常切换它的显示隐藏状态，用v-show更好；
 如果起始条件是false，v-show也会创建元素，创建后让元素display：none，所以v-show有更高的初始渲染代价
  -->
  </div>
</template>

<script>
export default {
  data(){
    return{
     flag:false
    }
  },
 
}
</script>

<style>

</style>
